<template>
  <el-card shadow="hover" style="margin-bottom:20px;">
    <el-divider content-position="left"><span style="font-size: 18px;font-weight: bolder;">密码修改</span></el-divider>
    <el-form ref="dataForm" label-position="right" :model="dataForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="请输入您的原密码：" size="small" label-width="150px" prop="originpassword" placeholder="请输入大于6位的字符">
        <el-input v-model="dataForm.originPassword" placeholder="请输入大于或等于6位的字符" />
      </el-form-item>
      <el-form-item label="请输入您的新密码：" size="small" label-width="150px" prop="password">
        <el-input v-model="dataForm.newPassword" placeholder="请输入大于或等于6位的字符" />
      </el-form-item>
      <el-form-item label-width="120px" align="right">
        <el-button type="primary" @click="submitForm">确认修改</el-button>
        <el-button @click="resetForm('dataForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
const { getName } = require('@/utils/auth')
const { modifyUserPassword } = require('@/api/user')
export default {
  name: 'Updatepassword',
  data() {
    return {
      text: '功能尚未完善，即将上线！',
      dataForm: { // 数据表单
        username: getName(), // 当前登陆用户名称
        originPassword: '', // 原密码
        newPassword: '' // 新密码
      }
    }
  },
  methods: {
    submitForm() {
      if (this.dataForm.newPassword === '' && this.dataForm.originPassword === '') {
        this.$message({
          type: 'error',
          message: '原密码和新密码不能为空',
          duration: 1.5 * 1000
        })
      } else {
        this.postModifydataHandle()
      }
    },
    resetForm() {
      // this.$refs.dataForm.resetFields() // 重置输入参数
      this.dataForm.originPassword = ''
      this.dataForm.newPassword = ''
    },
    async postModifydataHandle() {
      const res = await modifyUserPassword(this.dataForm)
      const header = res.data.respOutMsgHeader
      if (header.respCode === 200) {
        this.$message({
          type: 'success',
          iconClass: 'el-icon-loading',
          message: '用户密码修改成功，您需要重新登陆一次！',
          duration: 1.5 * 1000
        })
        // 执行退出登陆
        await this.logout()
      } else {
        this.$message({
          type: 'error',
          iconClass: 'el-icon-loading',
          message: '修改失败,错误信息：' + header.msg,
          duration: 3 * 1000
        })
      }
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }
}
</script>

<style scoped>

</style>
